
<template>
<div class="all">
  <img src="../assets/哔哩哔哩.png" alt="" style="width:1520px;height:100px">
    <h1><span>注册</span></h1>
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <div class="input0">
        <el-form-item label="昵称" prop="nickName">
          <el-input
            type="nickName"
            placeholder="请输入昵称"
            v-model="ruleForm.nickName"
          ></el-input>
        </el-form-item>
      </div>
      <div class="input1">
        <el-form-item label="密码" prop="pass">
          <el-input
            type="password"
            v-model="ruleForm.pass"
            autocomplete="off"
            show-password
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
      </div>
      <div class="input2">
        <el-form-item label="确认密码" prop="checkPass">
          <el-input
            type="password"
            v-model="ruleForm.checkPass"
            autocomplete="off"
            show-password
            placeholder="请确认密码"
          ></el-input>
        </el-form-item>
      </div>
      <div class="input3">
        <el-form-item label="年龄" prop="age">
          <el-input v-model.number="ruleForm.age" placeholder="请输入年龄">
          </el-input>
        </el-form-item>
      </div>

      <!-- 手机号 -->
      <div class="input4">
        <el-input
          placeholder="请输入常用手机号"
          v-model="telphone"
          :error="errors.telphone"
          class="input-with-select"
          style="width: 440px; margin-left: 100px"
        >
          <el-select
            v-model="value"
            slot="prepend"
            placeholder="请选择"
            style="width: 180px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-input>
      </div>

      <!-- 验证码 -->
      <div class="input5" style="margin-top: 27px">
        <el-input
          placeholder="请输入验证码"
          v-model="checkcode"
          :btnTitle="btnTitle"
          :disabled="disabled"
          :error="errors.checkcode"
        
          class="input-with-button"
          style="width: 368px; margin-left: 100px"
        >
        </el-input>
        <button type="button" class="btn-sncode" @btnClick="getCheckcode">点击获取</button>
      </div>

      <el-form-item>
        <el-button
          type="primary"
          style="width: 440px;margin-top:27px"
          @click="submitForm('ruleForm')"
          >注册</el-button
        >
      </el-form-item>
      <div class="readme txtright" style="margin-left: 400px">
        <a href="">已有账号，直接登录></a>
      </div>
    </el-form>
      <img src="../assets/banner.jpg" alt="" style="width:1520px;height:100px">
   
  </div>
</template>
<style>
body {
  line-height: 1.5;
}

.form a {
  color: #00a1d6;
}

.form {
  width: 980px;
  margin: 1em auto;
}
/* 设置 .form 的宽度   然后margin： 1em(距上面一个字体距离)  auto(水平居中)； */

.input0,
.input1,
.input2,
.input3 {
  width: 35%;
  margin: auto;
}

button {
  height: 40px;
  background-color: #00a1d6;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  border-radius: 4px;
}
.input_group button[disabled]{
    color: #aaa;
}
.is-invalid{
  border:1px solid #F56C6C
}
.invalid-feedback{
    color: #F56C6C;
    padding-top: 5px;
}
/* .txtright {
  text-align: right;
} */
</style>

<script>


import InputGroup from '../components/InputGroup'
export default {
  data() {
    

    var inputnickName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("昵称不能为空"));
      }
    };
    //  var inputtelphone = (rule, value, callback) => {
    //   if (!value) {
    //     return callback(new Error("手机号不能为空"));
    //   }setTimeout(() => {
    //     if (!Number.isInteger(value)) {
    //       callback(new Error("请输入数字值"));
    //     } 
    //   }, 1000);
    // };
    // var inputcheckcode = (rule, value, callback) => {
    //   if (!value) {
    //     return callback(new Error("验证码不能为空"));
    //   }setTimeout(() => {
    //     if (!Number.isInteger(value)) {
    //       callback(new Error("请输入数字值"));
    //     }
    //   }, 1000);
    // };

    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("年龄不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入数字值"));
        } else {
          if (value < 18) {
            callback(new Error("必须年满18岁"));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      telphone:"",
      checkcode:"",
      errors:{

      },
      btnTitle:"获取验证码",
      disabled:false,
      options: [
        {
          value: "选项1",
          label: "中国大陆",
        },
        {
          value: "选项2",
          label: "中国香港特别行政区",
        },
        {
          value: "选项3",
          label: "中国澳门特别行政区",
        },
        {
          value: "选项4",
          label: "中国台湾",
        },
        {
          value: "选项5",
          label: "美国",
        },
        {
          value: "选项6",
          label: "比利时",
        },
        {
          value: "选项7",
          label: "澳大利亚",
        },
        {
          value: "选项8",
          label: "法国",
        },
        {
          value: "选项9",
          label: "加拿大",
        },
        {
          value: "选项10",
          label: "日本",
        },
        {
          value: "选项11",
          label: "新加坡",
        },
        {
          value: "选项12",
          label: "韩国",
        },
        {
          value: "选项13",
          label: "马来西亚",
        },
        {
          value: "选项14",
          label: "英国",
        },
        {
          value: "选项15",
          label: "意大利",
        },
        {
          value: "选项16",
          label: "德国",
        },
        {
          value: "选项17",
          label: "俄罗斯",
        },
        {
          value: "选项18",
          label: "新西兰",
        },
      ],
      value: "",
      ruleForm: {
        pass: "",
        checkPass: "",
        age: "",
        nickName: ""
        // telphone:"",
        // checkcode:""
      },
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
        age: [{ validator: checkAge, trigger: "blur" }],
        nickName: [{ validator: inputnickName, trigger: "blur" }]
        // telphone: [{ validator: inputtelphone, trigger: "blur" }],
        // checkcode:[{ validator: inputcheckcode, trigger: "blur" }]
        
      },
    };
  },
  components:{
     InputGroup
  },
  methods: {
    submitForm(nickName) {
      this.$refs[nickName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(nickName) {
      this.$refs[nickName].resetFields();
    },
    getCheckcode(){
      if(this.validatePhone()){
        //发送请求
        this.validateBtn();
      }
    },
    
    validateBtn(){
        let time =60;
        let timer=setInterval(() => {
           if(time==0){
             clearInterval(timer);
             this.btnTitle="获取验证码";
             this.disabled=false;
          }else{
          //倒计时
          this.btnTitle=time+"秒后重试";
          this.disabled=true;
          time--;
          }
        },1000);
    },
    validatePhone(){
      //验证手机号码
      if(!this.telphone){
        this.errors={
          telphone:"手机号码不能为空"
        };
        return false;
      }else if(!/^1[345678]\d{9}$/.test(this.telphone)){
        this.errors={
          telphone:"请填写正确的手机号码"
        };
        return false;
      }else{
        this.errors={};
        return true; 
      }
    },
    //注册
  //   submit(){
  //     if (this.nickName.trim()=="" && this.pass.trim()=="") {
  //       return;
        
  //     }
  //     if (!this.nickName.match(/^(\w{1,})+@([a-zA-Z]{2,3})+((\.[a-zA-Z]{2,3}))$/) && 
  //     !this.pass.match(/^\w{6,}$/)
  //     ) {
  //       return;
        
  //     }
  //     let users=localStorage.users;
  //     if(users){
  //       users=JSON.parse(users);
  //     }else{
  //       users=[];
  //     }
  //     users.push({
  //       nickName:this.nickName,
  //       pass:this.pass
  //     });
  //     localStorage.users=JSON.stringify(users);
  //     this.$notify({
  //       type:"success",
  //       message:"恭喜您 注册成功"
  //     });
  //     setTimeout(()=>{
  //       this.$router.push({
  //         path:"/Login"

  //       });
  //     },2000);

  // }
 }
}
</script>